<!--
 *  
 *   -22 15:01:37
 *   -13 13:29:37
 *   
 *    
 *   \dami\src\pages\index\floor.vue
-->
<template>
  <div class="floor-wrap">
    <Row>
      <Col span="18">
        <Card
          v-for="floor of floorData"
          :key="floor.floorId"
          class="floor"
          :bordered="false"
        >
          <p slot="title">
            <span class="floor-title">{{ floor.floorId }}</span>
            <span>{{ floor.floorName }}</span>
          </p>
          <div class="item-wrap">
            <Row>
              <Col span="8" class="item-big">
                <Card class="floor-item-big" :dis-hover="true">
                  <!-- <div
                      class="item-img"
                      :style="{
                        'background-color': floor.floorItem[0].imgUrl,
                      }"
                    ></div> -->
                  <img
                    @click="detail(floor.floorItem[0])"
                    class="item-img"
                    :src="floor.floorItem[0].imgUrl"
                    alt=""
                  />

                  <div class="item-info" @click="detail(floor.floorItem[0])">
                    <p class="item-itemName">
                      {{ floor.floorItem[0].itemName }}
                    </p>
                    <p class="item-price">
                      票价： ￥{{ floor.floorItem[0].minPrice }}
                    </p>
                  </div>
                </Card>
              </Col>
              <Col span="16" class="items">
                <Card
                  v-for="item of floorfilter(floor.floorItem)"
                  :key="item.id"
                  :class="floorCount(item.id)"
                  :dis-hover="true"
                  @click.native="$toDetail(item.itemName)"
                >
                  <!-- <div
                      class="item-img"
                      :style="
                        floorCount(item.id)
                          ? {
                              'background-color': item.imgUrl,
                            }
                          : ''
                      "
                    ></div> -->
                  <img
                    @click="detail(item)"
                    class="item-img"
                    :src="item.imgUrl"
                    alt=""
                  />
                  <div class="item-info" @click="detail(item)">
                    <p class="item-date">
                      {{ item.itemDate }}
                    </p>
                    <p class="item-itemName">
                      {{ item.itemName }}
                    </p>
                    <p class="item-price">票价： ￥{{ item.minPrice }}</p>
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Card
          v-for="list of hotList"
          :key="list.hotId"
          :bordered="false"
          class="hot-list"
        >
          <p slot="title">{{ list.hotName }}</p>
          <span href="#" slot="extra">更多>></span>

          <p
            v-for="item of list.ListData"
            :key="item.listId"
            class="list-info"
            :class="hotcount(item.listId) < 4 ? 'top' : ''"
            @click="goDetail()"
          >
            <span
              class="list-id"
              :class="hotcount(item.listId) < 4 ? 'hot' : 'other'"
              >{{ hotcount(item.listId) }}</span
            >
            <span class="list-name">{{ item.listName }}</span>
          </p>
        </Card>
      </Col>
    </Row>
  </div>
</template>
  
  <script>
export default {
  name: "Floor",
  data() {
    return {
      // floorData: this.floorData,
      floorData: [
        {
          floorId: "猜你喜欢",
          // floorName: "namename",
          floorItem: [
            {
              itemName: "河边的错误",
              imgUrl: require("../../assets/banner/1.png"),
              minPrice: 5,
            },
            {
              itemName: "坚如磐石",
              imgUrl: require("../../assets/banner/2.png"),
              minPrice: 124,
            },
            {
              itemName: "一个和四个盘",
              imgUrl: require("../../assets/banner/3.png"),
              minPrice: 130,
            },
            {
              itemName: "无价之宝",
              imgUrl: require("../../assets/banner/4.png"),
              minPrice: 245,
            },
            {
              itemName: "唐人街探案",
              imgUrl: require("../../assets/banner/5.png"),
              minPrice: 32.5,
            },
          ],
        },
        {
          floorId: "个性推荐",
          // floorName: "namename",
          floorItem: [
            {
              itemName: "歌唱音乐节",
              imgUrl: require("../../assets/swiper/one1.png"),
              minPrice: 5,
            },
            {
              itemName: "坚如磐石",
              imgUrl: require("../../assets/banner/2.png"),
              minPrice: 124,
            },
            {
              itemName: "一个和四个",
              imgUrl: require("../../assets/banner/3.png"),
              minPrice: 130,
            },
            {
              itemName: "无价之宝",
              imgUrl: require("../../assets/banner/4.png"),
              minPrice: 245,
            },
            {
              itemName: "唐人街探案",
              imgUrl: require("../../assets/banner/5.png"),
              minPrice: 32.5,
            },
          ],
        },
        {
          floorId: "正在热映",
          // floorName: "namename",
          floorItem: [
            {
              itemName: "出好戏",
              imgUrl: require("../../assets/swiper/two.png"),
              minPrice: 5,
            },
            {
              itemName: "坚如磐石",
              imgUrl: require("../../assets/banner/2.png"),
              minPrice: 124,
            },
            {
              itemName: "一个和四个",
              imgUrl: require("../../assets/banner/3.png"),
              minPrice: 130,
            },
            {
              itemName: "无价之宝",
              imgUrl: require("../../assets/banner/4.png"),
              minPrice: 245,
            },
            {
              itemName: "唐人街探案",
              imgUrl: require("../../assets/banner/5.png"),
              minPrice: 32.5,
            },
          ],
        },
        {
          floorId: "即将上映",
          // floorName: "namename",
          floorItem: [
            {
              itemName: "他们正年轻",
              imgUrl: require("../../assets/swiper/three.png"),
              minPrice: 5,
            },
            {
              itemName: "坚如磐石",
              imgUrl: require("../../assets/banner/2.png"),
              minPrice: 124,
            },
            {
              itemName: "一个和四个",
              imgUrl: require("../../assets/banner/3.png"),
              minPrice: 130,
            },
            {
              itemName: "无价之宝",
              imgUrl: require("../../assets/banner/4.png"),
              minPrice: 245,
            },
            {
              itemName: "唐人街探案",
              imgUrl: require("../../assets/banner/5.png"),
              minPrice: 32.5,
            },
          ],
        },
        {
          floorId: "VIP票价",
          // floorName: "namename",
          floorItem: [
            {
              itemName: "坚如磐石",
              // imgUrl: require("../../assets/swiper/one.png"),
              imgUrl: require("../../assets/banner/2.png"),

              minPrice: 5,
            },
            {
              // itemName: "安踏气云联名男鞋2023新款秋季透",
              itemName: "歌唱音乐节",

              // imgUrl: require("../../assets/banner/2.png"),
              imgUrl: require("../../assets/swiper/one1.png"),

              minPrice: 124,
            },
            {
              itemName: "一个和四个",
              imgUrl: require("../../assets/banner/3.png"),
              minPrice: 130,
            },
            {
              itemName: "无价之宝",
              imgUrl: require("../../assets/banner/4.png"),
              minPrice: 245,
            },
            {
              itemName: "唐人街探案",
              imgUrl: require("../../assets/banner/5.png"),
              minPrice: 32.5,
            },
          ],
        },
      ],
      hotList: [
        {
          hotId: 1,
          hotName: "今日票房",
          ListData: [
            {
              listId: 1,
              listName: "拯救嫌疑人",
            },
            {
              listId: 2,
              listName: "河边的错误",
            },
            {
              listId: 3,
              listName: "二手杰作",
            },
            {
              listId: 4,
              listName: "志愿军：雄兵出击",
            },
            {
              listId: 5,
              listName: "坚如磐石",
            },
            {
              listId: 6,
              listName: "坚如磐石",
            },
            {
              listId: 7,
              listName: "坚如磐石",
            },
            {
              listId: 8,
              listName: "坚如磐石",
            },
            {
              listId: 9,
              listName: "坚如磐石",
            },
          ],
        },
        {
          hotId: 2,
          hotName: "最受期待",
          ListData: [
            {
              listId: 1,
              listName: "涉过愤怒的海",
            },
            {
              listId: 2,
              listName: "惊奇队长2",
            },
            {
              listId: 3,
              listName: "一闪一闪亮晶晶",
            },
            {
              listId: 4,
              listName: "我本是高山",
            },
            {
              listId: 5,
              listName: "再见，李可乐",
            },
            {
              listId: 6,
              listName: "照明商店",
            },
            {
              listId: 7,
              listName: "蜡笔小新",
            },
            {
              listId: 8,
              listName: "无价之宝",
            },
            {
              listId: 9,
              listName: "金手指",
            },
            {
              listId: 10,
              listName: "三大队",
            },
          ],
        },
        {
          hotId: 3,
          hotName: "TOP 100",
          ListData: [
            {
              listId: 1,
              listName: "我不是药神",
            },
            {
              listId: 2,
              listName: "肖申克的救赎",
            },
            {
              listId: 3,
              listName: "海上钢琴师",
            },
            {
              listId: 4,
              listName: "绿皮书",
            },
            {
              listId: 5,
              listName: "霸王别姬",
            },
            {
              listId: 6,
              listName: "美丽人生",
            },
            {
              listId: 7,
              listName: "这个杀手不太冷",
            },
            {
              listId: 8,
              listName: "小偷家族",
            },
            {
              listId: 9,
              listName: "星际穿越",
            },
          ],
        },
        {
          hotId: 1,
          hotName: "今日推荐",
          ListData: [
            {
              listId: 1,
              listName: "河边的错误",
            },
            {
              listId: 2,
              listName: "河边的错误",
            },
            {
              listId: 3,
              listName: "河边的错误",
            },
            {
              listId: 4,
              listName: "河边的错误",
            },
            {
              listId: 5,
              listName: "河边的错误",
            },
            {
              listId: 6,
              listName: "河边的错误",
            },
            {
              listId: 7,
              listName: "河边的错误",
            },
            {
              listId: 8,
              listName: "河边的错误",
            },
            {
              listId: 9,
              listName: "河边的错误",
            },
            {
              listId: 10,
              listName: "河边的错误",
            },
            {
              listId: 11,
              listName: "河边的错误",
            },
          ],
        },
        {
          hotId: 1,
          hotName: "票房最高",
          ListData: [
            {
              listId: 1,
              listName: "拯救嫌疑人",
            },
            {
              listId: 2,
              listName: "拯救嫌疑人",
            },
            {
              listId: 3,
              listName: "拯救嫌疑人",
            },
            {
              listId: 4,
              listName: "拯救嫌疑人",
            },
            {
              listId: 5,
              listName: "拯救嫌疑人",
            },
            {
              listId: 6,
              listName: "拯救嫌疑人",
            },
            {
              listId: 7,
              listName: "拯救嫌疑人",
            },
            {
              listId: 8,
              listName: "拯救嫌疑人",
            },
            {
              listId: 9,
              listName: "拯救嫌疑人",
            },
            {
              listId: 10,
              listName: "拯救嫌疑人",
            },
            {
              listId: 11,
              listName: "拯救嫌疑人",
            },
          ],
        },
      ],
    };
  },
  methods: {
    getfloor: function () {
      this.$http
        .getRequest({
          api: "floor",
          data: {},
        })
        .then((res) => {
          this.floorData = res.floor;
          //   console.log(res)
          //   console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getHot: function () {
      this.$http
        .getRequest({
          api: "Hot",
          data: {},
        })
        .then((res) => {
          this.hotList = res.hotList;

          //   console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goDetail: function () {
      this.$toDetail();
    },
    detail(item) {
      console.log(item, "item");
      localStorage.setItem("itemInfo", JSON.stringify(item));
      //   window.location.reload();

      this.$router.push({ name: "Detail" });
    },
  },
  computed: {
    //控制floorItem样式
    //计算结果作为
    floorCount() {
      return function (id) {
        return id % 5 == 1 ? "floor-item-big" : "floor-item";
      };
    },
    floorfilter() {
      return function (items) {
        return items.slice(1);
      };
    },
    hotcount() {
      return function (id) {
        return id % 12 || 12;
      };
    },
  },
  mounted: function () {
    // this.getfloor();
    // this.getHot();
  },
};
</script>
  
  <style scoped>
.floor-wrap {
  position: relative;
}
.floor {
  margin-bottom: 30px;
}
.floor-title {
  color: red;
  font-size: 18px;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-wrap: wrap;
}
.item-wrap .ivu-card {
  border: none;
}
.ivu-card-body {
  padding: 0;
}
.floor-item:hover,
.floor-item-big:hover {
  cursor: pointer;
}
.floor-item-big .ivu-card-body {
  padding: 0px !important;
}
.floor-item-big .item-img {
  width: 260px;
  height: 350px;
}
.floor-item-big .item-info {
  position: absolute;
  bottom: 16px;
  width: 250px;
  background-color: rgba(255, 0, 0, 0.445);
  color: #fff;
}
.floor-item .item-img {
  display: inline-block;
  width: 100px;
  height: 150px;
  border: none;
}
.floor-item .item-info {
  display: inline-block;
}
.floor-item .item-itemName,
.item-price,
.item-date {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px;
  font-size: 12px;
}
.item-wrap .ivu-card {
  display: inline-block;
}

.hot-list {
  height: 501px;
  /* background-color: rgb(214, 143, 91); */
}
.list-info {
  padding: 5px 30px 5px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-info:hover {
  cursor: pointer;
}
.hot {
  background-color: red;
  color: #fff;
}
.other {
  background-color: grey;
}
.list-id {
  padding: 0 5px;
}
</style>